<template>
	<div class="pay">
	    <Header :show="true">缴费及发票</Header>
		<div class="cart">
			<ul>
				<li>
					<div class="line1">
						<span class="left"><!-- {{item.name}} -->商务票</span>
						<span class="right">
							<button @click="reduce(item)">-</button>
							<span class="num"><!-- {{i}}} -->1</span>
							<button @click="add(item)">+</button>
						</span>
					</div>
					<div class="line2">
						<span>￥8888</span>
						<span><!-- {{item.price}} --></span>
					</div>
					<div class="remarks">
						<p>备注说明：</p>
						<p>大会VIP嘉宾坐席，参加VIP晚宴</p>
					</div>
				</li>
				<li>
					<div class="line1">
						<span class="left"><!-- {{item.name}} -->普通票</span>
						<span class="right">
							<button @click="reduce(item)">-</button>
							<span class="num"><!-- {{i}}} -->1</span>
							<button @click="add(item)">+</button>
						</span>
					</div>
					<div class="line2">
						<span>￥2888</span>
						<span><!-- {{item.price}} --></span>
					</div>
					<div class="remarks">
						<p>备注说明：</p>
						<p>普通观众,中午自助餐</p>
					</div>
				</li>
			</ul>
		</div>
		<div class="footer">
	   	   <span class="more">合计：￥11776<span><!-- {{totalPrice}} --></span></span>
	   	   <!-- <span>总票数：<span>{{totalNum}}</span></span> -->
	   	   <router-link to="/"class="state">去付款</router-link>
	    </div>
	</div>
</template>

<script>
	import Header from '../base/Header'
	// import {mapGetters} from 'vuex'
	export default {
		name:'Pay',
        components:{
        	Header
        },
        data(){
        	return{}
        }
	}
</script>

<style scoped lang="less">
	.pay{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 11;
	}
	.cart{
		padding: 60px 20px;
		font-size: 0.38rem;
		ul{
			li{
				margin: 0.15rem 0;
				.line1{
					overflow: hidden;
					.left{float: left;}
					.right{
						float: right;
						button{
							font-size: 0.5rem;
							width: 0.5rem;
							height: 0.5rem;
							line-height: 0.5rem;
							border-radius: 50%;
							outline: none;
							border: 1px solid #ff6200;
							background: #ff6100;
							color: #fff;
						}
						.num{margin: 0 0.2rem;}
					}
				}
				.line2{
					color: #ff6100;
				}
				.remarks{
					p{font-size: 0.3rem;color: #999;}
				}
			}
		}
	}
	.footer{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 50px;
			line-height: 50px;
			font-size: 0.34rem;
			.more{
				background: #fff;
				text-align: center;
				color: #222;
				display: inline-block;
				width: 50%;
				border-top: 1px solid #ccc;
				float: left;
			}
			.state{
				background: #ff6100;
				text-align: center;
				color: #fff;
				width: 50%;
				float: left;
			}
		}
</style>